<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="filter-title filter-item">用户身份</span>
      <k-select
        v-model="listQuery.userType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[
          {
            label: '普通用户',
            value: '1',
          },
          {
            label: '合作用户',
            value: '2',
          },
        ]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">时间</span>
      <k-date-picker
        v-model="timeValue"
        type="datetimerange"
        valueFormat="yyyy-MM-dd HH:mm:ss"
        class="filter-item right-item"
        @hqchang="handleFilter"
      />
      <span class="filter-title filter-item">货币类型</span>
      <k-select
        v-model="listQuery.consumeType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[
          {
            label: '积分',
            value: '1',
          },
          {
            label: '晶粹',
            value: '2',
          },
        ]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">流水类型</span>
      <k-select
        v-model="listQuery.shareType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[
          {
            label: '消费',
            value: '1',
          },
          {
            label: '消耗',
            value: '2',
          },
        ]"
        @handleSelectEvent="handleFilter"
      />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="搜索下级用户名"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <!--表格相关 -->
    <el-table
      :data="listData"
      border
      fit
      :summary-method="getSummaries"
      show-summary
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 30px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column prop="shareTime" min-width="100px" label="时间" align="center" />
      <el-table-column prop="userType" min-width="100px" label="当时身份" align="center">
        <template slot-scope="scope">
          {{ getUserType(scope.row.userType) }}
        </template>
      </el-table-column>
      <el-table-column prop="userMobile" min-width="100px" label="下级用户名" align="center" />
      <el-table-column min-width="100px" label="下级身份" align="center">
        <template slot-scope="scope">
          {{ getUserType(scope.row.thatType) }}
        </template>
      </el-table-column>
      <el-table-column prop="amount" min-width="100px" label="流水数" align="center" />
      <el-table-column  min-width="100px" label="货币类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.consumeType==1?'积分':'晶粹' }}
        </template>
      </el-table-column>
      <el-table-column prop="shareType" min-width="100px" label="流水类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.shareType==1?'消费':'消耗' }}
        </template>
      </el-table-column>
      <el-table-column prop="shareAmount" min-width="100px" label="本次提成(J)" align="center" />

    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { listUserDataDetail } from '@/api/avatar'

export default {
  name: 'Extension',
  components: { Pagination },
  dicts: ['IDENTITY_TYPE'],
  data() {
    return {
      timeValue: '',
      listData: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        key: '', // 名称'
        userType: '', // 身份所属',
        consumeType:'',// 货币类型
        shareType:"", // 流水类型
        startTime: '', // 最终创建时间",
        endTime: '' // 最早支付时间",
      }
    }
  },
  watch: {
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },

  created() {
    this.loadData()
  },
  methods: {
    /**
    * 合计
    * @param {obj} param
    */
    getSummaries(param) {
      const {
        columns
      } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'amount') {
          sums[index] = this.customPrice
        }
      })
      return sums
    },
    getUserType(userType) {
      let s = ''
      switch (userType) {
        case 1:
          s = "普通用户";
          break;
        case 2:
          s = "合作用户";
          break;
      }
      return s
    },
    loadData() {
      listUserDataDetail({ ...this.listQuery, extensionId:this.$route.query.extensionId }).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
        this.customPrice = res.data.totalData
      })
    },
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.pager.pageNo = 1
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
    .filter-container {
      width: 100%;
      height: 48px;
      line-height: 48px;

      .filter-item {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      .right-item{
          margin-right: 10px;
        }
      .kInput {
        position: absolute;
        right: 20px;
      }

      .filter-title {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        font-weight: 500;
        margin-right: 22px;
        color: #14162E;
      }

      .user-item {
        margin-left: 10px;
        margin-right: 20px;
      }

      .user-status,
      .account-status {
        margin-right: 20px;
      }
    }

</style>
